<template>
  <div class="wmc-basic-table">
    <el-table
      v-bind="$attrs"
      :data="data"
      :border="border"
      :stripe="stripe"
      v-loading="loading"
    >
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align"
          :fixed="column.fixed"
          :sortable="column.sortable"
        >
          <template #default="scope">
            <slot
              :name="`column-${column.prop}`"
              :row="scope.row"
              :column="column"
              :index="scope.$index"
            >
              {{ column.formatter ? column.formatter(scope.row, column, scope.row[column.prop]) : scope.row[column.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div v-if="pagination" class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="pagination.total"
        :page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
        :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { TableColumn, PaginationProps } from './types'
import './style/index.scss'

defineOptions({
  name: 'BasicTable'
})

const props = withDefaults(
  defineProps<{
    columns: TableColumn[]
    data: any[]
    loading?: boolean
    border?: boolean
    stripe?: boolean
    pagination?: PaginationProps
  }>(),
  {
    loading: false,
    border: true,
    stripe: true
  }
)

const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'size-change', size: number): void
}>()

const currentPage = ref(props.pagination?.currentPage || 1)
const pageSize = ref(props.pagination?.pageSize || 10)

watch(
  () => props.pagination?.currentPage,
  (newVal) => {
    if (newVal) currentPage.value = newVal
  }
)

watch(
  () => props.pagination?.pageSize,
  (newVal) => {
    if (newVal) pageSize.value = newVal
  }
)

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('page-change', page)
}
</script>

<style lang="scss">
.wmc-basic-table {
  width: 100%;

  .el-table {
    --el-table-border-color: var(--wmc-border-color);
    --el-table-header-bg-color: var(--wmc-bg-color-page);
    --el-table-row-hover-bg-color: var(--wmc-bg-color-page);
    
    th {
      font-weight: 600;
      color: var(--wmc-text-color);
      background-color: var(--wmc-bg-color-page);
    }

    td {
      color: var(--wmc-text-color-secondary);
    }
  }

  .pagination-container {
    margin-top: var(--wmc-spacing-large);
    padding: var(--wmc-spacing-base);
    background-color: var(--wmc-bg-color);
    border-radius: var(--wmc-border-radius-base);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .el-pagination {
      justify-content: flex-end;
      
      .el-pagination__total {
        margin-right: var(--wmc-spacing-large);
      }

      .el-pagination__sizes {
        margin-right: var(--wmc-spacing-large);
      }
    }
  }
}
</style>
